<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>个人中心</title>
<%@ include file="/include/mobilelibs.jsp"%>
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style>
.personnalHeight {
	padding-bottom: 3rem; 
}

.personalTop {
	width: 100%;
	border: none;
	position: relative;
}

.topImg {
	width: 100%;
	z-index: -1;
}

.iconImg {
	position: absolute;
	width: 3.5rem;
	height: 5.5rem;
	top: 23.5%;
	left: 42.333%;
	text-align: center;
}

.topIcon {
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 3rem;
}

.iconImg span {
	color: #FFFFFF;
	font-family: "微软雅黑";
}

.center {
	
}

.personalCenter {
	margin-top: -1%;
	padding: 0.5rem 0 0.5rem 0.6rem;
	background-color: #FFFFFF;
	width: 100%;
	height: 5rem;
}

.center-left {
	width: 47%;
	height: 4rem;
	border-right: 1px solid #EEEEEE;
	float: left;
}

.center-right {
	width: 49%;
	height: 4rem;
	float: left;
	margin-left: 0.6rem;
}

.leftTop {
	width: 100%;
	height: 1rem;
	background: url(images/personalCenter/cash.png) no-repeat left center;
	background-size: 0.8rem 0.8rem;
}

.leftTop span {
	font-family: "微软雅黑";
	font-size: 0.8rem;
	color: #c4c4c4;
	padding-left: 1.2rem;
	line-height: 1rem;
}

.cash {
	width: 100%;
	height: 3.5rem;
	text-align: center;
	line-height: 3.5rem;
	font-family: "微软雅黑";
	font-size: 1.4rem;
	font-weight: bold;
}

.cash span {
	font-family: "微软雅黑";
	font-size: 1.4rem;
	font-weight: bold;
}

.rightTop {
	width: 100%;
	height: 1rem;
	background: url(images/personalCenter/score.png) no-repeat left center;
	background-size: 0.8rem 0.8rem;
}

.rightTop span {
	font-family: "微软雅黑";
	font-size: 0.8rem;
	color: #c4c4c4;
	padding-left: 1.2rem;
	line-height: 1rem;
}

.personalFooter {
	width: 100%;
	background-color: #FFFFFF;
}

.personalFooter li {
	width: 100%;
	height: 3rem;
	border-top: 1px solid #e3e3e3;
	list-style: none;
	/*background: url(images/personalCenter/tip.png) no-repeat 96% center;*/
}

.id {
	font-family: "微软雅黑";
	line-height: 3rem;
	float: left;
}

.idNumber {
	font-family: "微软雅黑";
	line-height: 3rem;
	float: right;
}

.tip {
	font-family: "微软雅黑";
	line-height: 3rem;
	float: right;
	padding-right: 5%;
	color: #999999;
}

.idWidth {
	width: 30%;
	height: 3rem;
	margin-left: 14%;
	float: left;
}

.idWidth2 {
	width: 30%;
	height: 3rem;
	margin-left: 10%;
	float: left;
}
</style>
</head>

<body>
	<div class="mui-content personnalHeight">
		<div class="personalTop">
			<img src="images/personalCenter/topBg.png" class="topImg" />
			<div class="iconImg">
				<img src=" ${empty user.avatar? 'images/personalCenter/icon.png': user.avatar}" class="topIcon" /> <span>${user.name}</span>
			</div>
		</div>

		<div class="personalCenter">
			<div class="center-left">
				<div class="leftTop">
					<span>累计获得奖金</span>
				</div>
				<div class="cash">
					¥ <span>${reward}</span>
				</div>

			</div>
			<div class="center-right">
				<div class="rightTop">
					<span>累计完成任务数</span>
				</div>
				<div class="cash">${count}</div>
			</div>
		</div>

		<div class="personalFooter">

			<li
				style="background: url(images/personalCenter/li1.png) no-repeat 6% center; background-size: 1rem;">
				<div class="idWidth">
					<span class="id">账号</span>
				</div>
				<div class="idWidth2">
					<span class="idNumber">${user.userId}</span>
				</div> <span class="tip"></span>
			</li>
			<li
				style="background: url(images/personalCenter/li2.png) no-repeat 6% center; background-size: 1rem;">
				<div class="idWidth">
					<span class="id">姓名</span>
				</div>
				<div class="idWidth2">
					<span class="idNumber">${user.name}</span>
				</div> <span class="tip"></span>
			</li>
			<li
				style="background: url(images/personalCenter/li3.png) no-repeat 6% center; background-size: 1rem;">
				<div class="idWidth">
					<span class="id">手机号</span>
				</div>
				<div class="idWidth2">
					<span class="idNumber">${user.mobile}</span>
				</div> <span class="tip"></span>
			</li>
			<li
				style="background: url(images/personalCenter/li4.png) no-repeat 6% center; background-size: 1rem 1.3rem;">
				<div class="idWidth">
					<span class="id">职位</span>
				</div>
				<div class="idWidth2">
					<span class="idNumber">${user.position }</span>
				</div> <span class="tip"></span>
			</li>
			<li
				style="background: url(images/personalCenter/li5.png) no-repeat 6% center; background-size: 1rem;">
				<div class="idWidth">
					<span class="id">所属部门</span>
				</div>
				<div class="idWidth2">
					<span class="idNumber">${user.department }</span>
				</div> <span class="tip"></span>
			</li>
		</div>
 
	</div>
	<nav class="mui-bar2 mui-bar-tab">
		<a class="mui-tab-item" type='list'> <span
			class="mui-icon iconfont">&#xe605;</span> <span
			class="mui-tab-label fontSize">任务大厅</span>
		</a> <a class="mui-tab-item" href="#tabbar-with-chat" type='mytask'> <span
			class="mui-icon iconfont">&#xe603;</span> <span
			class="mui-tab-label fontSize">我的任务</span>
		</a> <a class="mui-tab-item  mui-active" href="#tabbar-with-map" type='person'> <span
			class="mui-icon iconfont">&#xe600;</span> <span
			class="mui-tab-label fontSize">个人中心</span>
		</a>
	</nav>
	<script>
		$('body').height($(window).height());
		$('body').width($(window).width());
		//添加列表项的点击事件
		mui(".mui-bar-tab").on('tap','.mui-tab-item',function(){
		  var type = this.getAttribute('type');
	 	  if(type =='list') {
	 		 mui.openWindow({
				    id:'list.html',
				    url:'mobile.html?userId='+localStorage.userId
				  });  
	 	  }else if(type =='mytask')    {
	 		 mui.openWindow({
				    id:'myTask.html',
				    url:'myTask.html?userId='+localStorage.userId
				  });  
	 	  }else if(type =='person')    {
	 		 mui.openWindow({
				    id:'personalCenter.html',
				    url:'personalCenter.html?userId='+localStorage.userId
				  });  
	 	  }
		});
	</script>
</body>

</html>